<template>
  <div class="adminHome">
    <div class="adminMsg" >
      <h2>退租管理</h2>
      <div class="title block">
        <span>退租列表</span>
<!--        <span>退租信息</span>-->
        <span>审核状态</span>
        <span>操作</span>
      </div>
      <div v-for="(item,index) in currentList" :key="index">
        <div class="info block">
          <div class="imgTitle">
            <img :src="item.houseImg">
            <div class="houseInfo">
              <h3>{{ item.houseTitle }}</h3>
              <p ><i class="el-icon-location-outline"> {{ item.houseCity}}  {{item.houseArea}}  {{item.houseAddress}}</i></p>
              <p><i class="el-icon-date"> {{ item.startDate }} 至 {{item.endDate}}</i></p>
              <p>{{ item.renterName }}</p>
              <p>{{ item.renterPhone }}</p>
            </div>
          </div>
<!--          <div class="msg">
            <el-button type="text" @click="showDetail(item.id)">查看退租原因</el-button>
          </div>-->
          <div class="msg">
            <p :class="['status',getStatusType(item.status)]">{{getStatusText(item.status)}}</p>
          </div>
          <div v-if="item.status===3||item.status===-4" class="btn">
            <el-button type="success" @click="agree(item.id,item.houseId)" >同意</el-button>
            <el-button type="danger" @click="disagree(item.id,item.houseId)">拒绝</el-button>
          </div>
          <div v-else class="btn">
            <el-button type="warning" >删除</el-button>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination :current-page.sync="pageNum"
                       :page-size="pageSize"
                       :page-sizes="[3, 5, 9]"
                       :total="allList.length"
                       layout="total, sizes, prev, pager, next"
                       @current-change="handlePage"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import axios from "axios";

const user =JSON.parse(localStorage.getItem('login-user'))

export default {
  name: "AdminMyHouse",
  created() {
    this.getLease();
  },
  data(){
    return{
      list:[],
      pageNum:1,
      pageSize:5,
      allList:[],
      currentList:[],
    }
  },

  methods:{

    handleSizeChange(size) {
      //console.log("当前显示数据数量为：",size)
      this.pageSize = size;

      this.pageNum = 1; // 重置到第一页

      this.handlePage(1,size)
    },

    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    getLease(){
      axios({
        url:"http://localhost:8090/lease/list",
        methods: 'get',
      }).then(res=>{
        if (res.code === '200'){

          //console.log(res.data)

          this.allList= res.data;

          // this.list = this.allList.slice(0, 3);

          this.handlePage(1)
        }else {
          this.$message.warning(res.msg)
        }
      })
    },

    //同意退租
    agree(id,hid){
      axios({
        url:"http://localhost:8090/lease/agreeTermination",
        method: 'put',
        data:{
          id:id,
          houseId:hid
        }
      }).then(res=>{
        if (res.code === '200'){
          this.$message.success('申请通过')
          this.getLease()
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    //不同意退租
    disagree(id,hid){
      axios({
        url:"http://localhost:8090/lease/disagreeTermination",
        method: 'put',
        data:{
          id:id,
          houseId:hid
        }
      }).then(res=>{
        if (res.code === '200'){
          this.$message.success('申请通过')
          this.getLease()
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    showDetail(id){

    },

    getStatusType(status) {
      switch (status){
        case 3:
          return 'status4';
        case -4:
          return 'status2';
        case 4:
          return 'status1';
        default:
          return 'status-default';
      }
    },
    getStatusText(status){
      switch (status){
        case 3:
          return '待审核';
        case -4:
          return '申请不通过';
        case 4:
          return '申请通过';
        default:
          return '未知状态';
      }
    }
  },
}
</script>

<style scoped>
.adminHome{
  width: 100%;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg{
  width: 100%;
  min-height: 800px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
  margin-buttom: 15px;
  margin-left: 0px;
}

.page{
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

.block{
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child{
  flex: 4;
}

.block> :nth-child(n+2){
  flex: 2;
  text-align: center;
}

.title{
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}
.title span{
  font-size: 16px;
  font-weight: 600;
  margin-right: 1px;
}

.info{
  height: 180px;
  padding:30px 20px;
  border-bottom: 1px solid #eee;
}

.info img{
  padding-top: 15px;
  width: 200px;
  height: 220px;
}

.info .msg{
  color: #777;
}

.imgTitle{
  display: flex;
}

.houseInfo{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.houseInfo h3{
  font-size: 18px;
  font-weight: 600;
}

.houseInfo p{
  font-size: 14px;
  color: #777;
}

.houseInfo span{
  padding: 3px 10px;
  width: 150px;
  font-size: 12px;
  color: #777;
  background-color: #eee;
}

.status{
  font-size: large;
  font-weight: 600;
  color: #fff;
}

.status1 {
  color: #20ab6c;
}

.status2 {
  color: #ff0000;
}

.status3 {
  color: #1890ff; /* 蓝色表示完成状态 */
}
.status4{
  color: #dcd91c;
}
</style>